<template>
	<div class="TpCouponInfo">
		<div class="TpCouponInfo-content">
			<div class="TpCouponInfo-cbg">
				<div class="TpCouponInfo-ccon">
					<div class="tpccon-top">
						<p>{{CouponInfo.couponTitle}}</p>
						<div class="tpccont-bottom" >
							使用期限{{CouponInfo.startTime}} - {{CouponInfo.endTime}}
						</div>
					</div>
					<div class="tpccon-bottom">
						<p>￥{{CouponInfo.couponPrices}}</p>
						<div class="tpccont-btn" v-if="coupontype=='true'">
							<router-link to="/">立即使用</router-link>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="TpCouponInfo-bottom">
			<div class="tpcib-title">使用说明</div>
			<div class="tpcib-con">
				<p>{{CouponInfo.couponDesc}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "TpCouponInfo",
		data(){
			return{
				couponId:this.$route.query.couponId,
				coupontype:this.$route.query.coupontype.toString(),
				CouponInfo:[]
			}
		},
		computed: {
			...mapGetters([
				'source',
				'CouponListInfo',
			])
		},
		mounted(){
			for (var i = 0; i < this.CouponListInfo.length; i++) {
				if (this.CouponListInfo[i].couponId==this.couponId) {
					this.CouponInfo=this.CouponListInfo[i]
				}
			}
		}
		
	}
</script>
<style>
	.TpCouponInfo {
		color: #282828;
		font-size: .28rem;
	}
	
	.TpCouponInfo-content {
		padding: .25rem .24rem;
		box-sizing: border-box;
		background: #ECECEC;
		color: #fff;
	}
	
	.TpCouponInfo-cbg {
		width: 100%;
		background: url(../assets/img/images/Coupon-info.png) no-repeat top, url(../assets/img/images/Coupon-infob.png) no-repeat bottom;
		background-size: 100% .12rem;
		padding: .12rem 0;
		box-sizing: border-box;
	}
	
	.TpCouponInfo-ccon {
		width: 100%;
		height: 100%;
		background: #E25051;
		padding-top: .69rem;
		box-sizing: border-box;
	}
	.tpccon-top{
		text-align: center;
	}
	.tpccon-top>p{
		font-size: .35rem;
		line-height: .35rem;
	}
	.tpccont-bottom{
		font-size: .28rem;
		line-height: .28rem;
		margin-top: .45rem;
		position: relative;
	}
	.tpccont-bottom::after,.tpccont-bottom::before{
		content: "";
		display: block;
		width: .87rem;
		height: .02rem;
		background: #fff;
		position: absolute;
		top: .13rem;
	}
	.tpccont-bottom::after{
		left: .16rem;
	}.tpccont-bottom::before{
		right: .16rem;
	}
	.tpccon-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .65rem 0;
		box-sizing: border-box;
	}
	.tpccon-bottom>p{
		font-size: .97rem;
		line-height: .97rem;
		margin-left: .3rem;
	}
	.tpccont-btn{
		font-size: .28rem;
		width: 1.86rem;
		line-height: .66rem;
		color: #E25051;
		background: #eeecec;
		margin-right: .58rem;
		text-align: center;
		border-radius: .05rem;
	}
	.TpCouponInfo-bottom{
		padding: .24rem;
		box-sizing: border-box;
	}
	.TpCouponInfo-bottom p{
		margin-top: .24rem;
		line-height: .31rem;
	}
</style>